<template>
  <div class="infocon">
      <div>
          <img src="../../../public/img/hot1 (9).jpg" alt="" class="bannerImg">
      </div>
      <div class="titleDes">
          <h2>胭脂雪</h2>
          <p class="lanuage">一生一世太短，若有三生三世，也只愿与你相遇、相伴。爱意至深，才敢三生三世、生生世世只你唯一。</p>
          <p>￥<span>288</span> <span>338</span></p>
      </div>
      <div class="norms">
        <span class="group-title">规格</span>
        <span class="def">已选择默认规格</span>
        <span class="iconfont icon-backbeifen"></span>
      </div>
       <div class="reserve">
        <p class="group-title">评价</p>
        <p class="score">综合评分<span>5.0</span></p>
        <p class="all" @click="allDiscuss">查看全部评价<span class="iconfont icon-backbeifen"></span></p>
      </div>
      <div class="store" @click="fun()">
          <div>
              <img src="../../../public/img/logo.png" alt="">
          </div>
          <div class="storename">
              <h3>心意鲜花</h3>
              <p>心意鲜花，懂你心意</p>
          </div>
          <div id="goback">
              <span class="iconfont icon-backbeifen"></span>
          </div>
      </div>
      <div class="foo">
         <div class="footop">
             <div class="dro">
                 <span>图文详情</span>
             </div>
             <div class="foobottom">
                 <img src="../../../public/img/infoimg1.jpg" alt="">
                <img src="../../../public/img/infoimg2.jpg" alt="">
                <img src="../../../public/img/infoimg3.jpg" alt="">
                <img src="../../../public/img/infoimg4.jpg" alt="">
                <img src="../../../public/img/infoimg5.jpg" alt="">
                <img src="../../../public/img/infoimg6.jpg" alt="">
                <img src="../../../public/img/infoimg7.jpg" alt="">
                <img src="../../../public/img/infoimg8.jpg" alt="">
            </div>
         </div>
         
      </div>
      
  </div>
</template>

<script>
export default {
methods:{
    allDiscuss(){
        this.$router.push("/discuss")
    },
    fun(){
        this.$router.push("/brand")
    }
}
}
</script>

<style scoped>
@import '../../../public/flower/iconfont.css';
.infocon{
    font-size: 0.16rem;
    width: 100%;
}
.bannerImg{
    width: 100%;
    height: 4.14rem;
}
.titleDes{
    height: 1.32rem;
    padding: 0rem 0.14rem;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
}
.titleDes,.reserve,.norms,.store,.footop,.dro{
    border-bottom: 0.02rem solid #f1f1f1;
    
}
.lanuage{
    font-size: 0.12rem;
    line-height: 0.16rem;
    color: #d6d6d6;
    margin-top: 0.14rem;
    margin-bottom: 0.22rem;
}
.norms{
    height: 0.52rem;
    line-height: 0.52rem;
     padding: 0rem 0.14rem;
    box-sizing: border-box;
}
.def{
    margin-left: 0.2rem;
    margin-right: 1.5rem;
}
.reserve{
   height: 0.52rem;
   line-height: 0.52rem;
    display: flex;
    padding: 0rem 0.14rem;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;

}
.norms,.reserve,.store{
  border-top: 0.02rem solid #f1f1f1;   

 }
 .score{
 margin-left: 0.2rem;
  margin-right: 0.8rem;
 }
 .storename{
 margin-left: 0.2rem;
  margin-right: 1rem;
 }
.store{
    height: 0.76rem;
  display: flex;
   padding: 0.08rem 0.14rem;
    box-sizing: border-box;
}
.store img{
    width: 0.48rem;
    height: 0.48rem;
}
.foo{
    width: 100%;
}
.footop{
    width: 90%; 
    margin: auto;
    /* background-color: pink; */
}
.store #goback{
    padding-top: 0.14rem;
    box-sizing: border-box;
}
.dro{
 height: 0.52rem;
 line-height: 0.52rem;
 color: #c6c6c6;
}
.foobottom img{
    width: 100%;
}
</style>